<template>
  <div class="app-container-custom">
    <el-row>
      <el-col :span="5" :xs="24">
        <el-card shadow="never">
          <div class="head-container" style="height: calc(100vh - 150px);">
            <el-tree
              :data="treeOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              ref="tree"
              default-expand-all
              node-key="id"
              :highlight-current="true"
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <div style="margin-left: 10px;">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain size="mini" @click="handleAddModelType">新增分类</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" plain size="mini" @click="handleAddGroup">新增分组</el-button>
            </el-col>
          </el-row>
          <el-card shadow="never">
            <dict-form v-if="currentNode.modelType == 'dict'" ref="dictFormRefs" :currentNode="currentNode" @ok="getTreeSelect"  />
            <group-form v-if="currentNode.modelType == 'group'"  ref="groupFormRefs" :currentNode="currentNode" @ok="getTreeSelect"  />
          </el-card>
        </div>
      </el-col>
    </el-row>
    <dict-add-form ref="dictAddRef"  @ok="getTreeSelect"/>
    <group-add-form ref="groupAddRef"  @ok="getTreeSelect"/>
  </div>
</template>

<script>
  import { treeselect } from "@/api/ureport/reportConfig"
  import DictAddForm from "./dict/addForm"
  import DictForm from "./dict/form"
  import GroupForm from "./group/form"
  import GroupAddForm from "./group/addForm"
  export default {
    name: "ReportConfig",
    components:{ DictForm,DictAddForm,GroupForm,GroupAddForm },
    data() {
      return {
        //房间字典
        treeOptions:[],
        defaultProps: {
          children: "children",
          label: "label"
        },
        currentNode:{},
        defaultShowNodes:[],
      }
    },
    created(){
      this.getTreeSelect()
    },
    methods:{
      getTreeSelect(){
        treeselect({}).then(res=>{
          this.treeOptions = res.data
          if(this.treeOptions.length > 0){
            this.currentNode = this.treeOptions[0]
            this.$nextTick(() => {
              if(this.currentNode){
                this.$refs.tree.setCurrentKey(this.currentNode.id);
              }
            })
          }
        })
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.currentNode = data
      },
      handleAddModelType(){
          this.$refs.dictAddRef.show()
      },
      handleAddGroup(){
        if(this.currentNode.modelType=='dict'){
          this.$refs.groupAddRef.show({currentNode: this.currentNode})
        }else{
          this.msgWarning("请选择所属分类")
        }
      }
    }
  }
</script>

<style scoped>

</style>
